<!-- 彩稿上传 -->
<template>
  <div>
    <div class="title pl0">
      <h3>彩稿上传</h3>
      <el-button type="text" v-if="isDisable && isLocked == '待锁定'" @click="handleEdit"
        >编辑</el-button
      >
    </div>
    <el-upload
      action="#"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :http-request="myUpload"
      :disabled="isDisable"
      :file-list="formData.productColorDraftFileList"
      :class="{ hideUpload: isDisable }"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-empty
      v-if="formData.productColorDraftFileList.length < 1 && isDisable"
      description="暂无彩稿"
    ></el-empty>
    <el-image-viewer
      v-if="dialogVisible"
      :url-list="dialogImageUrl"
      :on-close="closeViewer"
      :initial-index="viewImgIndex"
      :on-switch="onSwitch"
      :z-index="3000"
    />
    <div class="footer mt16" v-if="!isDisable">
      <el-button size="small" @click="handleCancel">取消</el-button>
      <el-button size="small" class="ml16" type="primary" @click="handleSave" :loading="isLoading"
        >保存</el-button
      >
    </div>
  </div>
</template>
      
      <script>
export default {
  name: "colorManuscript",
  components: {
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },
  props: {
    productCode: {
      type: String,
      default: () => {
        return "";
      },
    },
    isLocked:{
      type: String,
      default: () => {
        return "";
      },
    },
    isShowEdits:{
      type: Boolean,
      default: () => {
        return false;
      },
    },
    formModel: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    formModel: {
      handler(newVal, oldVal) {
        this.formData.productColorDraftFileList =
          newVal.productColorDraftFileList;
        if (this.formData.productColorDraftFileList.length > 0) {
          this.formData.productColorDraftFileList.forEach((item) => {
            item.url = item.draftFileUrl;
          });
          this.dialogImageUrl = this.formData.productColorDraftFileList.map(
          (x) => {
            return x.url;
          }
        );
        }
      },
    },
  },
  data() {
    return {
      formData: {
        productCode: this.productCode,
        productColorDraftFileList: [
          {
            productColorDraftFileID: 0,
            productColorDraftCode: "",
            productCode: "",
            draftFileName: "",
            draftFileType: "",
            draftFileSize: 0,
            draftFileUrl: "",
            draftFilePreview: "",
            uploadPerson: "",
            uploadTime: "2022-01-01 00:00:00",
            colorDraftType: 0,
            productTagCode: "",
            draftFileState: 0,
          },
        ],
      }, //表单
      viewImgIndex: 0,
      dialogImageUrl: [],
      dialogVisible: false,
      isDisable: true,
      isLoading:false,
      rules: {}, //表单验证
    };
  },

  methods: {
    //查看图片
    handlePictureCardPreview(file) {
      console.log(file);
      this.viewImgIndex = this.formData.productColorDraftFileList.findIndex(
        (item) => {
          return item.draftFileUrl == file.url;
        }
      );
      console.log(this.dialogImageUrl);
      this.dialogVisible = true;
    },

    //图片预览关闭事件
    closeViewer() {
      this.dialogVisible = false;
    },

    //删除文件
    handleRemove(file, fileList) {
      console.log(file)
      console.log(this.formData.productColorDraftFileList)
      if(file.productColorDraftCode){
        this.$api.business
        .DeleteProductColorDratfFile({
          productColorDraftCode: file.productColorDraftCode,
        })
        .then(() => {
            // this.formData.productColorDraftFileList.forEach((item,index)=>{
            //   if(item.productColorDraftCode == file.productColorDraftCode){
            //     this.formData.productColorDraftFileList.splice(index, 1)
            //   }
            // })
            this.$message.success("删除成功");
            // this.getDetail(this.productCode);
          });
      }
      this.formData.productColorDraftFileList.forEach((item,index)=>{
        if(item.uid == file.uid){
          this.formData.productColorDraftFileList.splice(index,1)
        }
      })
    },

    // 上传文件
    myUpload(e) {
      this.isLoading = true
      let type = e.file.name.split(".");
      if (type[type.length - 1] != "png" && type[type.length - 1] != "jpg") {
        this.$message.warning("请上传图片文件");
        return;
      }
      const file = e.file;
      var formData = new FormData();
      formData.append("file", file);
      this.$api.common.UploadSingleFile(formData).then((res) => {
        this.formData.productColorDraftFileList.push({
          productColorDraftCode: "", //彩稿文件编号（唯一识别码）
          productCode: this.productCode, //产品编号
          draftFileName: res.fileName, //彩稿文件名称
          draftFileType: res.fileSuffix, //文件类型（存储文件后缀名）
          draftFileSize: res.fileSize, //彩稿文件大小，单位：KB
          draftFileUrl: res.fileFullUrl, //文件存储地址（相对路径）
          draftFilePreview: res.thumbnailWebSiteUrl, //预览图片
          url: res.fileFullUrl,
          uploadPerson: "", //
          uploadTime: "2022-01-01 00:00:00",
          colorDraftType: 0,
          productTagCode: "",
          draftFileState: 0,
        });
        this.dialogImageUrl = this.formData.productColorDraftFileList.map(
          (x) => {
            return x.url;
          }
        );
        this.isLoading = false
      });
    },

    handleCancel(){
      this.$confirm("信息尚未保存，是否保存?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      }).then(() => {
        this.handleSave()
      }).catch(() => {
        this.isShowEdits = true
        this.$emit('showEditEvent',this.isShowEdits)
        this.getDetail(this.productCode);
        this.isDisable = true
      });
    },

    handleEdit(){
      if(this.isShowEdits){
        this.isDisable = false
        this.isShowEdits = false
        this.$emit('showEditEvent',this.isShowEdits)
      }else{
        this.$message.warning('有未保存的编辑，请保存后再编辑')
      }
    },

    //保存
    handleSave() {
      let form = {
        productCode: this.productCode, //产品编号
        productColorDraftFileList:[]
      }
       form.productColorDraftFileList = this.formData.productColorDraftFileList.filter(
        (item, index) => {
          return !item.productColorDraftFileID;
        }
      );
      this.$api.business.SaveColorDratfFile(form).then(() => {
        let obj = {
            state: 3,
            productCode: this.productCode,
          };
          if(this.formModel.productPrintingColorList.length>0){
            this.$api.business.UpdateProductState(obj).then((res) => {
            });
          }
          this.isShowEdits = true
          this.$emit('showEditEvent',this.isShowEdits)
          this.$message.success("保存成功");
          this.getDetail(this.productCode);
        this.isDisable = true;
      });
    },
    onSwitch(e) {
      console.log(e);
    },

    //获取详情
    getDetail(id) {
      this.$emit('init','')
    },
  },
};
</script>
      
      <style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: center;
}

.title h3:before {
  content: "" !important;
  padding-right: 9px !important;
  border-left: 3px solid #3f61f1;
}

::v-deep .hideUpload {
  .el-upload.el-upload--picture-card {
    display: none;
  }
}

::v-deep .el-upload-list__item {
  transition: none !important;
}
</style>
      